<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <el-card class="box-card tree-wrapper" shadow="always">
        <el-tree
          ref="cata"
          :data="cataOptions"
          default-expand-all
          node-key="id"
          empty-text="加载中，请稍后"
          :props="defaultProps"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </el-card>
    </el-col>
    <el-col :span="20">
      <el-tabs v-model="activeTabName" type="card">
        <el-tab-pane label="API接口" name="shareApi">
          <ShareApi ref="bindApi" :cataId="queryParams.cataId" @showCard="showCard"/>
        </el-tab-pane>
        <el-tab-pane label="库表数据" name="shareTable">
          <ShareTable ref="bindTable" :cataId="queryParams.cataId" @showCard="showCard"/>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
import { listCata } from '@/api/market/cata'
import ShareApi from './ShareApi'
import ShareTable from './ShareTable'
import { construct } from '@/utils/json-tree'

export default {
  name: 'ShareList',
  components: { ShareApi, ShareTable },
  data() {
    return {
      clickCata: {},
      activeTabName: 'shareApi',
      tableHeight: document.body.offsetHeight - 310 + 'px',
      // 展示切换
      
      showOptions: {
        data: {},
        showList: true,
        showApply: false,
        showTableDetail: false,
        showApiDetail: false
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 表格头
      tableColumns: [
        { prop: 'username', label: '用户名称', show: true },
        { prop: 'nickname', label: '用户昵称', show: true },
        { prop: 'email', label: '电子邮箱', show: true },
        { prop: 'phone', label: '手机号码', show: true },
        {
          prop: 'cata',
          label: '所属部门',
          show: true,
          formatter: this.cataFormatter
        },
        {
          prop: 'posts',
          label: '所属岗位',
          show: true,
          formatter: this.postFormatter
        },
        {
          prop: 'roles',
          label: '所属角色',
          show: true,
          formatter: this.roleFormatter
        },
        {
          prop: 'status',
          label: '状态',
          show: true,
          formatter: this.statusFormatter
        },
        { prop: 'createTime', label: '创建时间', show: true }
      ],
      tableSize: 'medium',
      // 用户表格数据
      userList: [],
      // 数据集表格数据
      dataApiList: [],
      // 总数据条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        username: '',
        nickname: '',
        cataId: '0'
      },
      // 部门列表
      cataOptions: [],
      defaultProps: {
        children: 'children',
        label: 'cataName'
      },
      // 状态数据字典
      statusOptions: []
    }
  },
  created() {
    this.getDicts('sys_common_status').then(response => {
      if (response.success) {
        this.statusOptions = response.data
      }
    })
    this.getCataTree()
  },
  mounted() {
  },
  methods: {
    showCard (data) {
      Object.assign(this.showOptions, data)
      this.$emit('showCard', this.showOptions)
    },
    /** 节点单击事件 */
    handleNodeClick(data) {
      this.queryParams.cataId = data.id
      if(this.activeTabName == "shareApi") {
        this.$refs['bindApi'].getListByConf(data.id)
      }
      
      if(this.activeTabName == "shareTable") {
        this.$refs['bindTable'].getListByConf(data.id)
      }
    },
    /** 查询部门树结构 */
    getCataTree() {
      listCata().then(response => {
        if (response.success) {
          const { data } = response
          this.cataOptions = construct(data, {
            id: 'id',
            pid: 'parentId',
            children: 'children'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.right-toolbar {
  float: right;
}
.el-card ::v-deep .el-card__body {
  height: calc(100vh - 170px);
}
.tree-wrapper {
  overflow-y: auto;
}

.bottom {
  margin-top: 8px;
  line-height: 10px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
